
<template>
	<div class="nav">
		<div class="header">
			<li class="header_logo"></li>
			<li class="header_icon" @click="slide"></li>		
		</div>
		<div class="nav_detail">
			<h3>频道</h3>
			<ul class="detail-ul">
				<router-link to="/home" tag="li">要闻</router-link>
				<!-- <router-link tag="li" active-class="active" to="/follow"><a href="javascript:;" >关注</a></router-link> -->
				<router-link to="/video" tag="li">视频</router-link>
				<router-link to="/now" tag="li">时事</router-link>
				<router-link to="/economic" tag="li">财经</router-link>
			</ul>
			<ul class="detail-ul">
				<router-link to="/idea" tag="li">思想</router-link>
				<router-link to="/life" tag="li">生活</router-link>
				<router-link to="/question" tag="li">问吧</router-link>
				<router-link to="/home" tag="li">澎湃号</router-link>
			</ul>
			<ul class="detail-ul">
				<router-link to="/home" tag="li">国际</router-link>
				<router-link to="/home" tag="li">科技</router-link>
				<router-link to="/home" tag="li">体育</router-link>
				<router-link to="/home" tag="li">上海</router-link>
			</ul>
		</div>
		<ul class="nav_list clear">
			<router-link class="left" to="/home" tag="li" active-class="active">要闻</router-link>
			<router-link class="left" to="/video" tag="li" active-class="active">视频</router-link>
			<router-link class="left" to="/now" tag="li" active-class="active">时事</router-link>
			<router-link class="left" to="/economic" tag="li" active-class="active">财经</router-link>
			<router-link class="left" to="/idea" tag="li" active-class="active">思想</router-link>
			<router-link class="left" to="/life" tag="li" active-class="active">生活</router-link>
			<router-link class="left" to="/question" tag="li" active-class="active">问吧</router-link>
		</ul>
		
	</div>
</template>

<script>
	import $ from 'jquery';
	export default {
		name:'Header',
		data(){
		  return {
		    
		  }
		},
		components:{},
		mounted(){
		},
		updated(){},
		methods:{
			slide(){
				$('.nav_detail').toggleClass('active')
				$('.header_icon').toggleClass('active')
			},
		},
	}
</script>

<style scoped>
	.nav{background-color: white;position: fixed;top: 0;z-index: 999;width: 100%;}
	.header{width: 100%;height: 0.44rem;display: flex;align-items: center;justify-content: space-between;}
	.header_logo{background: url(/images/header_logo.png);width: 0.5rem;height: 0.28rem;background-size: 100%;margin-left: 0.15rem;}
	.header_icon{width: 0.44rem;height: 0.44rem; background: url(../assets/img/xiangqing.png) no-repeat center center;background-size: 50%;}
	.header_icon.active{background-image: url(../assets/img/cuo.png);background-size: 30%;}
	.nav_list{width:100%;height: 0.44rem;display: flex;overflow: auto;align-items: center;justify-content: space-between;}
	.nav_list li{color: #33333;font-size: 0.14rem;padding: 0 0.15rem;flex: 1 0 auto;position: relative;}
	.nav_list li.active{color: #00A5EB;}
	.nav_list li.active::after{content: "";display: block;width: 0.40rem;height: 0.04rem;background-color: #00A5EB;    position: absolute;bottom: -0.2rem;left: 50%;transform: translate(-50%);}
	.nav_detail{width: 100%;height: 0;background-color: #666666;position: absolute;background-color: #F8F9F9;z-index: 1000;transition: 0.2s;padding: 0 0.15rem;box-sizing: border-box;overflow: hidden;}
	.nav_detail.active{height: 6.23rem;}
	.nav_detail h3{margin-bottom: 0.40rem;margin-top: 0.3rem;font-size: 0.18rem;}
	.nav_detail ul{margin-bottom: 0.15rem;display: flex;justify-content: space-between;}
	.nav_detail ul li{width: 0.79rem;height: 0.35rem;box-shadow: 0.04rem 0.04rem 0.08rem 0 rgba(222,228,230,1), -0.04rem -0.04rem 0.08rem 0 rgba(255,255,255,1);font-size: 0.16rem;color: #333;text-align: center;line-height: 0.35rem;}
</style>


